<template>
  <div>
    <h2>统计分析-学生</h2>
    <!--搜索框-->
    <!--<el-form :inline="true" :model="searchForm">
      <el-form-item label="课程：">
        <el-select v-model="searchForm.courseId" placeholder="请选择课程" @change="selectCourseChange">
          <el-option :label="item.name" :value="item.id" v-for="item in courseData"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="问卷：">
        <el-select v-model="searchForm.courseId" placeholder="请选择问卷" @change="selectCourseChange">
          <el-option :label="item.name" :value="item.id" v-for="item in courseData"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getPaperList" type="primary">查询</el-button>
      </el-form-item>
    </el-form>-->
    <!--<el-divider content-position="left">课程：
      <el-tag type="success">{{ searchForm.courseName }}</el-tag>
      , 问卷：
      <el-tag type="success">{{ searchForm.paperTitle }}</el-tag>
    </el-divider>-->
    <!--图表-->
    <div>

      <div>
        <h2>总览</h2>
        <el-divider></el-divider>
        <div id="PaperOverviewChart" :style="{width: '300px', height: '300px'}"></div>

      </div>
      <div>
        <h2>详情</h2>
        <el-divider></el-divider>
        <div id="PaperDetailsChart" :style="{width: '300px', height: '300px'}"></div>
      </div>
    </div>
  </div>

</template>

<script>

import * as echarts from 'echarts';

export default {
  name: "Paper",
  data() {
    return {
      searchForm: {
        courseName: '请选择课程',
        paperTitle: '请选择问卷'
      },
      courseData: []
    }
  },
  created() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('PaperOverviewChart'))
      console.log(document.getElementById('PaperOverviewChart'))
      // 绘制图表
      myChart.setOption({
        title: {text: 'ECharts 入门示例'},
        tooltip: {//设置鼠标悬停提示框的位置。
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      });
    },
    selectCourseChange(){
      console.log(1)
    },
    getPaperList(){
      console.log(1)
    }
  }
}
</script>

<style scoped>

</style>